<template>
  <div class="teach">
  <teach-tab @getCom="my"></teach-tab>
   <component :is="this.ComName"></component>
  </div>
</template>

<script>

const TeachTab=()=>import(/* webpackChunkName: "teach_tab" */ "../components/Teach_tab.vue");
const JaPan =()=>import(/* webpackChunkName: "JaPan" */ "../components/JaPan.vue");
const OldView =()=>import(/* webpackChunkName: "OldView" */ "../components/OldView.vue");
const GameView =()=>import(/* webpackChunkName: "GameView" */ "../components/GameView.vue");
const BusinessView =()=>import(/* webpackChunkName: "BusinessView" */ "../components/BusinessView.vue");
const PaperView =()=>import(/* webpackChunkName: "PaperView" */ "../components/PaperView.vue");
const DesignView =()=>import(/* webpackChunkName: "DesignView" */ "../components/DesignView.vue");
const ModelView =()=>import(/* webpackChunkName: "ModelView" */ "../components/ModelView.vue");
const AnimationView =()=>import(/* webpackChunkName: "AnimationView" */ "../components/AnimationView.vue");

export default {
  name: 'TeachView',
  components:{
    TeachTab,
    JaPan,
    OldView,
    GameView,
    BusinessView,
    PaperView,
    DesignView,
    ModelView,
    AnimationView
  },
  data() {
    return {
      ComName:'JaPan'
    };
  },
  created() {
    
  },
  mounted() {
    
  },

  methods: {
    my(ComName){
      console.log(ComName);
      this.ComName=ComName;
    }
  },
};
</script>

<style lang="scss" scoped>
.teach{
  height:78vh;
  overflow: hidden;
}
</style>